<template>
  <!-- 顶部 筛选部分 -->
  <div>
    <el-form>
      <div class="form">
        <el-form-item class="form-input form-content">
          <el-autocomplete
            class="inline-input"
            v-model="cityName"
            :fetch-suggestions="querySearch"
            placeholder="选择城市"
            @select="handleSelect"
            :trigger-on-focus="false"
            :highlight-first-item="true"
          ></el-autocomplete>
        </el-form-item>
        <!-- 日期 -->
        <el-form-item>
          <!-- change 用户确认选择日期时触发 -->
          <div class="block">
            <el-date-picker
              v-model="valueDate"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="{ disabledDate }"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item class="form-input form-user">
          <el-popover placement="top" width="360" v-model="visible">
            <div class="box-card">
              <div slot="header" class="clearfix">
                <span class="hidden-room">每间</span>
                <el-select v-model="adult" placeholder="成人">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <el-select v-model="children" placeholder="儿童">
                  <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>

              <el-button type="primary" class="el-botton" @click="getpoplelNum"
                >操作按钮
              </el-button>
            </div>
            <el-button
              slot="reference"
              suffix-icon="el-icon-user"
              id="people-number"
              >{{ Indnumber }}<i class="el-icon-user" id="user-icon"></i
            ></el-button>
          </el-popover>
        </el-form-item>

        <el-form-item class="form-input form-price">
          <el-button type="primary" @click="getForm">查看价格</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import { postcities } from "@/api/post.js";
export default {
  data() {
    return {
      visible: false,
      adult: "", //成人
      children: "", //孩子
      valueDate: "", //日期
      cities: "",
      citiesTwon: "",
      Indnumber: "不确定人数",
      cityName: "",
      oldcityName: "",

      options1: [
        //
        {
          value: "0儿童",
          label: "0",
        },
        {
          value: "1儿童",
          label: "1",
        },
        {
          value: "2儿童",
          label: "2",
        },
        {
          value: "3儿童",
          label: "3",
        },
        {
          value: "4儿童",
          label: "4",
        },
        {
          value: "5儿童",
          label: "5",
        },
        {
          value: "6儿童",
          label: "6",
        },
      ],
      options: [
        {
          value: "1成人",
          label: "1",
        },
        {
          value: "2成人",
          label: "2",
        },
        {
          value: "3成人",
          label: "3",
        },
        {
          value: "4成人",
          label: "4",
        },
        {
          value: "5成人",
          label: "5",
        },
      ],
    };
  },
  watch: {
    "$route.query": {
      handler() {
        if (this.$route.query.cityName) {
          this.oldcityName = this.$route.query.cityName;
        }
        console.log(1111111111111);
        console.log(this.oldcityName);
      },
    },
  },
  methods: {
    getForm() {
      // 把获取到的数据跟入住时间跟日期通过路由传递
      console.log(this.cityName);
      if (
        this.cityName &&
        !this.valueDate[0] == "" &&
        !this.valueDate[1] == ""
      ) {
        this.$router.push({
          path: `/hotel?cityName=${this.cityName}&enterTime=${this.valueDate[0]}&leftTime=${this.valueDate[1]}`,
        });
      } else if (this.cityName && !this.valueDate[0] && !this.valueDate[1]) {
        this.$router.push({ path: `/hotel?cityName=${this.cityName}` });
      } else if (
        this.cityName == "" &&
        !this.valueDate[0] == "" &&
        !this.valueDate[1] == ""
      ) {
        this.$router.push({
          path: `/hotel?cityName=${this.oldcityName}&enterTime=${this.valueDate[0]}&leftTime=${this.valueDate[1]}`,
        });
      }
    },
    // 获取人数
    getpoplelNum() {
      console.log(this.value1, this.value2);
      if (this.children == "0儿童") {
        this.children = "";
      } else {
        this.Indnumber = this.adult + this.children;
      }
      this.visible = false;
    },
    async querySearch(str, showList) {
      // console.log(str); 广州市
      // 获取城市地区
      let citiesRes = await postcities(str);
      this.citiesTwon = citiesRes;
      console.log(citiesRes);
      console.log(this.citiesTwon);
      if (citiesRes) {
        let citiesName = citiesRes.data.data.map((v) => {
          return {
            ...v,
            value: v.name,
          };
        });
        // 防止用户乱输入值

        showList(citiesName);
        this.cities = citiesName[0].name;
        // 获取里面的数据
        this.$emit("getcities", this.citiesTwon);
      }
    },
    handleSelect(str) {
      console.log(str);
      this.cityName = str.name;
      this.$router.push({ path: `/hotel?cityName=${str.name}` });
    },

    // 禁用
    disabledDate(time) {
      // 这里返回 true 说明disabled 不可选
      // 选中时间小于当前时间
      return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
      // 设定可以选择当天的日期
    },
  },
};
</script>

<style lang="less" scoped>
// 隐藏样式
.box-card {
  width: 270px;
}
// form
.form {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
  .block {
    margin-right: 5px;
  }
  .form-content {
    flex: 206px;
  }
  .form-date {
    flex: 350px;
  }
  .form-user {
    flex: 215px;
  }
  .form-price {
    flex: 95px;
  }
  .form-input {
    // flex: 17%;
    display: inline-block;
    margin-right: 10px;
    vertical-align: top;
  }
}
.box-card {
  .hidden-room {
    margin-right: 10px;
  }
  .el-botton {
    float: right;
    margin: 10px;
  }
}
/deep/ .el-select .el-input__inner {
  width: 95px;
}
#people-number {
  display: block;
  width: 250px;
  float: left;
  color: #c0c4cf;
}
#user-icon {
  float: right;
}
</style>